﻿@page "/toggles"

<Block Title="Toggle 开关" Introduction="提供最普通的开关应用">
    <CardBodyTemplate>
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Primary" OnValueChanged="@OnValueChanged"></Toggle></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Secondary" OnValueChanged="@OnValueChanged"></Toggle></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Success" OnValueChanged="@OnValueChanged"></Toggle></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Danger" OnValueChanged="@OnValueChanged"></Toggle></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Warning" OnValueChanged="@OnValueChanged"></Toggle></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Info" OnValueChanged="@OnValueChanged"></Toggle></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Dark" OnValueChanged="@OnValueChanged"></Toggle></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Toggle Value="false" OnText="开启" OffText="关闭" Color="Color.Success" OnValueChanged="@OnValueChanged"></Toggle></div>
            </div>
        </div>
        <Logger @ref="Trace" class="mt-3" />
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>
&lt;Toggle OnText="开启" OffText="关闭" OnValueChanged="@@OnValueChanged" Color="Color.Primary"&gt;&lt;/Toggle&gt;
&lt;Toggle OnText="开启" OffText="关闭" OnValueChanged="@@OnValueChanged" Color="Color.Secondary"&gt;&lt;/Toggle&gt;
&lt;Toggle OnText="开启" OffText="关闭" OnValueChanged="@@OnValueChanged" Color="Color.Success"&gt;&lt;/Toggle&gt;
&lt;Toggle OnText="开启" OffText="关闭" OnValueChanged="@@OnValueChanged" Color="Color.Danger"&gt;&lt;/Toggle&gt;
&lt;Toggle OnText="开启" OffText="关闭" OnValueChanged="@@OnValueChanged" Color="Color.Warning"&gt;&lt;/Toggle&gt;
&lt;Toggle OnText="开启" OffText="关闭" OnValueChanged="@@OnValueChanged" Color="Color.Info"&gt;&lt;/Toggle&gt;
&lt;Toggle OnText="开启" OffText="关闭" OnValueChanged="@@OnValueChanged" Color="Color.Dark"&gt;&lt;/Toggle&gt;
&lt;Toggle OnText="开启" OffText="关闭" OnValueChanged="@@OnValueChanged" Color="Color.Dark" Value="false"&gt;&lt;/Toggle&gt;
    </pre>
    </CodeTemplate>
</Block>

<Block Title="禁用状态" Introduction="开关不可用状态。">
    <CardBodyTemplate>
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Primary" OnValueChanged="@OnValueChanged"></Toggle></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Secondary" OnValueChanged="@OnValueChanged"></Toggle></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Success" OnValueChanged="@OnValueChanged"></Toggle></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Danger" OnValueChanged="@OnValueChanged"></Toggle></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Warning" OnValueChanged="@OnValueChanged"></Toggle></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Info" OnValueChanged="@OnValueChanged"></Toggle></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Dark" OnValueChanged="@OnValueChanged"></Toggle></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Toggle IsDisabled="true" Value="false" OnText="开启" OffText="关闭" Color="Color.Success" OnValueChanged="@OnValueChanged"></Toggle></div>
            </div>
        </div>
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>
&lt;Toggle IsDisabled="true" OnText="开启" OffText="关闭" OnValueChanged="@@OnValueChanged" Color="Color.Primary"&gt;&lt;/Toggle&gt;
&lt;Toggle IsDisabled="true" OnText="开启" OffText="关闭" OnValueChanged="@@OnValueChanged" Color="Color.Secondary"&gt;&lt;/Toggle&gt;
&lt;Toggle IsDisabled="true" OnText="开启" OffText="关闭" OnValueChanged="@@OnValueChanged" Color="Color.Success"&gt;&lt;/Toggle&gt;
&lt;Toggle IsDisabled="true" OnText="开启" OffText="关闭" OnValueChanged="@@OnValueChanged" Color="Color.Danger"&gt;&lt;/Toggle&gt;
&lt;Toggle IsDisabled="true" OnText="开启" OffText="关闭" OnValueChanged="@@OnValueChanged" Color="Color.Warning"&gt;&lt;/Toggle&gt;
&lt;Toggle IsDisabled="true" OnText="开启" OffText="关闭" OnValueChanged="@@OnValueChanged" Color="Color.Info"&gt;&lt;/Toggle&gt;
&lt;Toggle IsDisabled="true" OnText="开启" OffText="关闭" OnValueChanged="@@OnValueChanged" Color="Color.Dark"&gt;&lt;/Toggle&gt;
&lt;Toggle IsDisabled="true" OnText="开启" OffText="关闭" OnValueChanged="@@OnValueChanged" Color="Color.Dark" Value="false"&gt;&lt;/Toggle&gt;
    </pre>
    </CodeTemplate>
</Block>

<Block Title="双向绑定数据" Introduction="绑定组件内变量，数据自动同步">
    <CardBodyTemplate>
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-12">
                    <label class="control-label">双向绑定</label>
                    <Toggle @bind-Value="@BindValue"></Toggle>
                </div>
                <div class="form-group col-12">
                    <div>绑定数值: @BindValue</div>
                </div>
            </div>
        </div>
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>
&lt;Toggle @@bind-Value="@@BindValue"&gt;&lt;/Toggle&gt;
        </pre>
    </CodeTemplate>
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
